<template>
  <!-- <div v-bind="{ a: 1, b: 2 }"></div>
  可以简写成
  <div :="{ a: 1, b: 2 }"></div>
  最终显示都是
  <div a="1" b="2"></div> -->
  <div :title="title">
    <el-button :="$attrs" @click="handleClick">二次封装显示</el-button>
  </div>
</template>

<script setup lang="ts">
import { useAttrs } from 'vue'
import { Edit } from '@element-plus/icons-vue'

//使用useAttrs获取组件标签身上的属性与事件
const $attrs = useAttrs()
//props与useAttrs方法都可以获取到父组件传递过来的属性与属性值，但是props接收了某个属性后，useAttrs就不能获取到这个属性了。
//对于一个组件来说，如果使用defineProps来接收属性, 那么useAttrs中就没有这个属性了。
const props = defineProps(['title'])
const $emit = defineEmits(['customClick'])

const handleClick = () => {
  //自定义点击事件
  $emit('customClick', '自定义点击事件')
}
console.log($attrs)
</script>

<style scoped></style>
